@@include('include/header.html',{"name": "grid","desc": "网格"})
<section id="grid">
    <div class="demo-item">
        <p class="demo-desc">float网格适合多行</p>
        <div class="demo-block">
            <ul class="ui-row">
                <li class="ui-col ui-col-50">50</li>
                <li class="ui-col ui-col-50">50</li>
                <li class="ui-col ui-col-25">25</li>
                <li class="ui-col ui-col-75">75</li>
                <li class="ui-col ui-col-33">33</li>
                <li class="ui-col ui-col-67">67</li>
                <li class="ui-col ui-col-20">20</li>
                <li class="ui-col ui-col-80">80</li>
                <li class="ui-col ui-col-10">10</li>
                <li class="ui-col ui-col-90">90</li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">flex网格</p>
        <div class="demo-block">
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col">平均分</div>
                <div class="ui-col ui-col">平均分</div>
                <div class="ui-col ui-col">平均分</div>
                <div class="ui-col ui-col">平均分</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-2">2/3</div>
                <div class="ui-col">1/3</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-3">3/4</div>
                <div class="ui-col">1/4</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-4">4/5</div>
                <div class="ui-col">1/5</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-3">3/5</div>
                <div class="ui-col ui-col-2">2/5</div>
            </div>
    </div>
    </div>
    
    <div class="demo-item">
        <p class="demo-desc">竖排flex</p>
        <div class="demo-block">
            <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
                <div class="ui-col">1/2</div>
                <div class="ui-col">1/2</div>
            </div>
            <br/>
            <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
                <div class="ui-col ui-col-3">3/4</div>
                <div class="ui-col">1/4</div>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">三列</p>
        <div class="demo-block">
            <ul class="ui-grid-trisect ui-border-b">
                <li>
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                    </div>
                    <h4>高尔夫 <span>2.3M</span></h4>
                    <button class="ui-btn-s ui-btn-progress">免费</button>
                </li>
                <li>
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                    </div>
                    <h4>高尔夫 <span>2.3M</span></h4>
                    <button class="ui-btn-s ui-btn-progress">免费</button>
                </li>
                <li>
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                    </div>
                    <h4>高尔夫 <span>2.3M</span></h4>
                    <button class="ui-btn-s ui-btn-progress">免费</button>
                </li>
                <li>
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                    </div>
                    <h4>高尔夫 <span>2.3M</span></h4>
                    <button class="ui-btn-s ui-btn-progress">免费</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">两列</p>
        <div class="demo-block">
            <ul class="ui-grid-halve">
                <li>
                    <div class="ui-grid-halve-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                    </div>
                </li>
                <li>
                    <div class="ui-grid-halve-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                    </div>
                </li>
                <li>
                    <div class="ui-grid-halve-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                    </div>
                </li>
                <li>
                    <div class="ui-grid-halve-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

@@include('include/footer.html')